<template>
  <div v-if="show">
    <el-upload
      ref="img"
      action="' '"
      :limit="1"
      list-type="picture-card"
      :auto-upload="false"
      :file-list="fileList"
      :class="{ disabled: uploadDisabled }"
      :on-change="handleImageChange"
      :http-request="handleImageUpload"
      :on-remove="handleImageRemove"
    >
      <img
        v-show="image !== ''"
        :src="image"
        style="width: 100%; height: 100%;"
      />
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog
      title="图片剪裁"
      :visible.sync="showCropperDialog"
      append-to-body
    >
      <div class="cropper-content">
        <div
          class="cropper"
          style="text-align:center"
        >
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"
          ></vueCropper>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="showCropperdialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
        >确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { upload, del } from "@/api/staticResource";

export default {
  props: {
    image: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      img: "",
      uploadDisabled: false,
      showCropperDialog: false,
      fileList: [],
      show: true,
      option: {
        img: "",
        info: true,
        outputSize: 1,
        outputType: "jpeg",
        canScale: false,
        autoCrop: true,
        fixedBox: false,
        fixed: true,
        fixedNumber: [600, 800],
        full: true,
        canMoveBox: true,
        original: false,
        centerBox: false,
        infoTrue: true,
      },
    };
  },
  methods: {
    handleImageRemove() {
      this.uploadDisabled = false;
      this.delImage(this.img);
    },
    handleImageChange(file, fileList) {
      this.uploadDisabled = true;
      this.changeUpload = true;
      this.option.img = file.url;
      this.showCropperDialog = true;
      this.fileList = fileList;
    },
    handleImageUpload(file) {},
    handleConfirm() {
      this.$refs.cropper.getCropBlob((data) => {
        let formData = new FormData();
        formData.append("file", data);

        upload(formData).then((data) => {
          this.img = data.data;
          this.$emit("image", data.data);
          this.fileList[0].url = data.data;
        });
      });
      this.showCropperDialog = false;
      this.$forceUpdate();
    },
    delImage(e) {
      del(e).then((data) => {
        this.$message.success("删除成功");
      });
    },
    sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time));
    },
    async sleep() {
      await sleep(1000);
    },
  },
  mounted() {
    this.show = false;
    this.sleep();
    this.show = true;
  },
  created() {
    this.show = false;
    if (this.image) {
      this.fileList.push({
        url: this.image,
      });
    }
    this.show = true;
  },
};
</script>

<style>
.disabled .el-upload--picture-card {
  display: none;
}

.cropper {
  width: auto;
  height: 300px;
}
</style>